<template>
	<div>
		<!-- 标题区域 -->
		<van-nav-bar title="详情" left-text="返回" left-arrow @click-left="() => { $router.back() }" fixed />
		<div style="height: 40px;"></div>
		<!-- 渲染区域 -->
		<div v-html="detaildata.goods_introduce"></div>
		<!-- 优化 -->
		<van-action-bar>
			<van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
			<van-action-bar-icon icon="cart-o" text="购物车" />
			<van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
			<van-action-bar-button type="warning" text="加入购物车" @click="addcar" />
			<van-action-bar-button type="danger" text="立即购买" />
		</van-action-bar>
	</div>
</template>
<script setup>
import { ref } from 'vue';
// 获取传递过来router(带参数goods_id)
import { useRoute, useRouter } from 'vue-router';
const route = useRoute()
const router = useRouter()
console.log('详情页的id', route.params.goods_id)
// 拿到详情页的数据 进行渲染
import { detailApi } from '@/api/api';
let detaildata = ref([])
detailApi(route.params.goods_id).then(res => {
	console.log('详情页的数据', res)
	detaildata.value = res.data.message
})
// 引入pinia
import { useCounterStore } from '@/stores/car.js'
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
// 点击事件 点击加入购物车
const addcar = () => {
	// 调用购物车的方法 
	//  传入两个参数 参数一 ：详情页的数据 detaildata, 
	// 参数二：当前详情页的id (route.params.goods_id) (区分商品是否重复)
	store.addcar(detaildata, route.params.goods_id)
	// 跳转到购物车页面
	router.push('/home/car')
}
</script>
<style lang="scss" scoped></style>